<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <audio src="images/晴天.mp3" controls autoplay loop muted></audio>
    <!-- 属性和属性值相同的时候，简写成一个就可以了 -->
    <video src="images/kk.mp4" controls poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606111940120&di=270ae75f12eab48938e6b3f85fd02793&imgtype=0&src=http%3A%2F%2Fd.ifengimg.com%2Fmw604%2Fy0.ifengimg.com%2Fifengimcp%2Fpic%2F20151107%2F2466aff2055c3bec2a6e_size353_w1600_h1200.jpg"></video>
    <!-- 
        不同的浏览器的内核是不一样的，支持音视频文件的类型也是不一样的
        mp3、mp4、wav、avi、mlvd、ogg、webm
     -->
     <!-- <audio src="晴天.mp3"></audio>
     <audio src="晴天.ogg"></audio> -->
     <audio>
        <source src="晴天.mp3">
        <source src="晴天.ogg">
     </audio>
     
</body>
</html>
<!-- 
    音视频的用法
        - 默认情况下音视频都是不显示的，并且也是无法自动播放的(谷歌浏览器)
        - 谷歌浏览器 - 性能

        音频属性的使用
            标签:audio
        视频属性的使用
            标签:video
            属性：  
                - src 地址
                - controls 控件 
                - autoplay 自动播放
                - loop 循环播放
                - muted 静音
                - poster 导入一张图片、网络状态不佳的时候
 -->
 <!-- 
     总结:
        - 音视频使用较少
        - gif格式图
  -->